<template>
  <div class="container" :style="{ height: height + 'px' }">
    <div class="model">
      <ren assetUrl="/src/assets/bg/ren/ren.json" />
    </div>
    <content />
  </div>
</template>

<script setup>
import bitch from '@/components/bitch.vue'
import content from './content.vue';
import ren from '@/components/ren.vue'

import { ref, computed } from 'vue'

const height = computed(() => {
  return document.documentElement.clientHeight
})
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  max-width: 60vh;
  overflow: hidden;
  margin: 0 auto;
  background: url('/src/assets/bg/Bg.png');
  background-size: auto 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #73afda;
}

.model {
  position: absolute;
  z-index: 1;
  width: 100%;
  max-width: 60vh;
  height: 100%;
}
</style>